<template>
  <div class="my_navigation">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="true"
        @open="handleOpen"
        @close="handleClose"
        background-color="#d7e2d7"
        router
    >
      <el-menu-item  index="/search">
        <el-icon><icon-menu /></el-icon>
        <template #title>搜索</template>
      </el-menu-item>
      <el-menu-item index="/myList">
        <el-icon><icon-menu /></el-icon>
        <template #title >我的列表</template>
      </el-menu-item>
      <el-menu-item index="/songSheet">
        <el-icon><setting /></el-icon>
        <template #title>歌单</template>
      </el-menu-item>
      <el-menu-item index="/theCharts">
        <el-icon><document /></el-icon>
        <template #title>排行榜</template>
      </el-menu-item>
      <el-menu-item index="/setUp">
        <el-icon><setting /></el-icon>
        <template #title>设置</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

  <script  setup>
    import { ref } from 'vue'
    import {
      Document,
      Menu as IconMenu,
      Location,
      Setting,
    } from '@element-plus/icons-vue'
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
  </script>

  <style >
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .my_navigation{
      width: 65px;
      height: 100%;
      background: #d7e2d7;
    }
  </style>
